<template>
	<div class="tag-selector">
		<label class="tag-label"><strong>{{ label }}</strong></label>
		<div class="tag-search-container">
			<input type="text" class="tag-search-input" v-model="searchKeyword" 
				placeholder="搜索标签..." @input="filterTags">
		</div>
		<div class="tag-list-container">
			<div class="tag-list">
				<div v-for="tag in filteredTags" :key="tag.key" 
					class="tag-item" 
					:class="{ 'tag-selected': isTagSelected(tag.key) }"
					@click="toggleTag(tag.key)">
					<span class="tag-checkbox" v-if="isTagSelected(tag.key)">✓</span>
					{{ tag.cn }}
				</div>
			</div>
		</div>
		<div class="selected-tags" v-if="selectedTags.length > 0">
			<span class="selected-tag" v-for="tagKey in selectedTags" :key="tagKey">
				{{ getTagName(tagKey) }}
				<span class="remove-tag" @click="removeTag(tagKey)">×</span>
			</span>
		</div>
	</div>
</template>

<script>
import { getTagConfig } from '@/sub_pages/util/questionnaire/index.js';

export default {
	name: 'TagSelector',
	props: {
		label: {
			type: String,
			default: '目标用户标签'
		},
		modelValue: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			tagConfigs: {},
			allTags: [],
			filteredTags: [],
			searchKeyword: ''
		};
	},
	computed: {
		selectedTags: {
			get() {
				return this.modelValue;
			},
			set(newValue) {
				this.$emit('update:modelValue', newValue);
			}
		}
	},
	mounted() {
		this.loadTagConfigs();
	},
	methods: {
		loadTagConfigs() {
			// Load tag configurations from questionnaire system
			try {
				const tagConfig = getTagConfig();
				if (tagConfig && tagConfig.tags) {
					this.tagConfigs = tagConfig.tags;
					this.initTags();
				} else {
					console.error('Failed to load tag configs: Invalid config structure');
				}
			} catch (err) {
				console.error('Failed to load tag configs:', err);
			}
		},
		initTags() {
			// Filter out tags ending with 'normal' and convert to array
			this.allTags = Object.keys(this.tagConfigs)
				.filter(key => !key.endsWith('normal'))
				.map(key => ({
					key: key,
					cn: this.tagConfigs[key].cn,
					en: this.tagConfigs[key].en
				}));
			this.filteredTags = [...this.allTags];
		},
		filterTags() {
			if (!this.searchKeyword.trim()) {
				this.filteredTags = [...this.allTags];
				return;
			}
			
			const keyword = this.searchKeyword.toLowerCase();
			this.filteredTags = this.allTags.filter(tag => 
				tag.cn.toLowerCase().includes(keyword) || 
				tag.en.toLowerCase().includes(keyword)
			);
		},
		toggleTag(tagKey) {
			const currentTags = [...this.selectedTags];
			const index = currentTags.indexOf(tagKey);
			
			// Check if the tag is 'visibility-all' or 'visibility-hide'
			const isVisibilityTag = tagKey === 'visibility-all' || tagKey === 'visibility-hide';
			
			if (index > -1) {
				// Remove tag if already selected
				currentTags.splice(index, 1);
			} else {
				// If selecting a visibility tag (all or hide), clear all other tags
				if (isVisibilityTag) {
					currentTags.length = 0; // Clear all existing tags
					currentTags.push(tagKey); // Add only the visibility tag
				} else {
					// If selecting a normal tag, check if visibility tags exist
					const hasVisibilityAll = currentTags.includes('visibility-all');
					const hasVisibilityHide = currentTags.includes('visibility-hide');
					
					if (hasVisibilityAll || hasVisibilityHide) {
						// Remove visibility tags before adding the normal tag
						const allIndex = currentTags.indexOf('visibility-all');
						const hideIndex = currentTags.indexOf('visibility-hide');
						if (allIndex > -1) currentTags.splice(allIndex, 1);
						if (hideIndex > -1) currentTags.splice(hideIndex, 1);
					}
					
					currentTags.push(tagKey);
				}
			}
			
			this.selectedTags = currentTags;
		},
		removeTag(tagKey) {
			const currentTags = [...this.selectedTags];
			const index = currentTags.indexOf(tagKey);
			if (index > -1) {
				currentTags.splice(index, 1);
				this.selectedTags = currentTags;
			}
		},
		getTagName(tagKey) {
			return this.tagConfigs[tagKey] ? this.tagConfigs[tagKey].cn : tagKey;
		},
		isTagSelected(tagKey) {
			return this.selectedTags.includes(tagKey);
		}
	}
};
</script>

<style scoped>
.tag-selector {
	margin-bottom: 25px;
}

.tag-label {
	font-size: 18px;
	color: #333;
	margin-bottom: 10px;
	display: block;
}

.tag-search-container {
	margin-bottom: 15px;
}

.tag-search-input {
	width: calc(100% - 20px);
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
	margin-right: 10px;
}

.tag-search-input:focus {
	border-color: #007bff;
	outline: none;
}

.tag-list-container {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f9f9f9;
	margin-bottom: 15px;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	gap: 8px;
}

.tag-item {
	padding: 6px 12px;
	background-color: #e9ecef;
	border: 1px solid #ddd;
	border-radius: 15px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.3s ease;
	user-select: none;
	display: inline-block;
	overflow: hidden;
}

.tag-item:hover {
	background-color: #dee2e6;
	border-color: #007bff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.tag-item.tag-selected {
	background-color: #007bff;
	color: white;
	border-color: #007bff;
	font-weight: 500;
}

.tag-item.tag-selected:hover {
	background-color: #0056b3;
	border-color: #0056b3;
	box-shadow: 0 2px 6px rgba(0, 86, 179, 0.3);
}

.selected-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.selected-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	background-color: #007bff;
	color: white;
	border-radius: 12px;
	font-size: 12px;
}

.remove-tag {
	margin-left: 6px;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
}

.remove-tag:hover {
	color: #ff6b6b;
}

/* 响应式布局 */
@media (max-width: 768px) {
	.tag-search-input {
		font-size: 14px;
	}
	
	.tag-item {
		font-size: 11px;
		padding: 5px 10px;
	}
	
	.selected-tag {
		font-size: 11px;
	}
}
</style>
